<template>
    <el-dialog
        v-model="apiAddOrUpdateDialogVisible"
        title="添加路由API"
        width="30%"
        align-center
        :show-close="false"
        :close-on-click-modal="false"
    >
        <div class="formContainer">
            <el-form :model="apiForm" :rules="apiRules" ref="apiFormRef">
                <el-form-item label="所属微服务" label-width="20%" prop="applicationName">
                    <el-select v-model="apiForm.applicationName" clearable placeholder="所属微服务" style="width: 100%" @change="serviceChange()">
                        <el-option :value="item.applicationName" :label="item.applicationName" v-for="item in applicationList" :key="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="API名称" label-width="20%" prop="name">
                    <el-input v-model="apiForm.name" placeholder="API名称" clearable />
                </el-form-item>
                <el-form-item label="API编码" label-width="20%" prop="code">
                    <el-input v-model="apiForm.code" placeholder="API编码" clearable />
                </el-form-item>
                <el-form-item label="路由类型" label-width="20%" prop="code">
                    <el-select v-model="apiForm.routeType" placeholder="Select" style="width: 100px" @change="serviceChange()">
                        <el-option label="lb" value="lb" />
                        <el-option label="http" value="http" />
                    </el-select>
                </el-form-item>
                <el-form-item v-if="apiForm.routeType === 'http'" label="IP地址" label-width="20%">
                    <el-input v-model="apiForm.httpIp" placeholder="IP地址" clearable/>
                </el-form-item>
                <el-form-item v-if="apiForm.routeType === 'lb'" label="微服务名称" label-width="20%" prop="code">
                    <el-input disabled v-model="apiForm.routeServiceName" placeholder="微服务名称" clearable />
                </el-form-item>
                <el-form-item label="路由地址" label-width="20%" prop="routePath">
                    <el-input v-model="apiForm.routePath" placeholder="路由地址" clearable />
                </el-form-item>
                <el-form-item label="是否跨域" label-width="20%" prop="corsState">
                    <el-select v-model="apiForm.corsState" clearable placeholder="是否跨域" style="width: 100%">
                        <el-option value="REJECT_CORS" label="拒绝跨域"></el-option>
                        <el-option value="ALLOW_CORS" label="支持跨域"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="断言" label-width="20%" prop="predicates">
                    <el-input v-model="apiForm.predicates" placeholder="断言" clearable />
                </el-form-item>
                <el-form-item label="是否添加超时时间">
                    <el-radio-group v-model="apiForm.timeOut">
                        <el-radio :label="true">是</el-radio>
                        <el-radio :label="false">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="apiForm.timeOut" label="超时时间" label-width="20%" prop="timeOut">
                    <el-input-number v-model="apiForm.timeOutNum" :min="1"/>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancelDialog()">取 消</el-button>
                <el-button type="primary" :loading="saveLoading" @click="submitDialog(apiFormRef)">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="AddApiDialog" lang="ts">
import {addApiRouteInfoQuery, apiRouteInfoQuery, updateApiRouteInfoQuery} from '@/request/api'
import {ElNotification, FormInstance} from "element-plus";
import {applicationInfoQuery} from "@/request/service";
import {computed, defineProps, ref} from "vue";
import {useApiStore} from "@/stores/apiManage/api";

let props = defineProps(['apiForm']);

let apiForm = computed(() => {return props['apiForm']})

let apiRules = ref({
    name: [{ required: true, message: 'API名称不能为空', trigger: 'blur' }],
    code: [{ required: true, message: 'API编码不能为空', trigger: 'blur' }],
    routePath: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
    predicates: [{ required: true, message: '断言内容不能为空', trigger: 'blur' }],
    applicationName: [{ required: true, message: '微服务不能为空', trigger: 'blur' }]
});
let applicationList = ref([]);
let saveLoading = ref(false);

let apiAddOrUpdateDialogVisible = computed(() => {return useApiStore().addOrUpdateDialog});
let apiSearchData = computed(() => {return useApiStore().apiSearchData});

// 查询应用列表
applicationInfoQuery({}).then(res => {
    if (res["code"] === '200') {
        applicationList.value = res.data;
    }
})

function cancelDialog() {
    useApiStore().resetAddOrUpdateDialog(false);
}


let apiFormRef = ref<FormInstance>();
function submitDialog(formEl: FormInstance | undefined) {
    if (!formEl) return
    saveLoading.value = true
    formEl.validate((valid) => {
        if (valid) {
            if (!apiForm.value.routePath.startsWith("/")) {
                apiForm.value.routePath = "/" + apiForm.value.routePath;
            }
            if (!apiForm.value.predicates.startsWith("/")) {
                apiForm.value.predicates = "/" + apiForm.value.predicates;
            }
            if (apiForm.value.routeType === 'lb') {
                apiForm.value.routePath = "lb://" + apiForm.value.routeServiceName + apiForm.value.routePath;
            } else if (apiForm.value.routeType === 'http') {
                apiForm.value.routePath = "http://" + apiForm.value.httpIp + apiForm.value.routePath;
            }
            if (apiForm.value.id !== '') {
                // 修改
                updateApiRouteInfoQuery(apiForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        useApiStore().resetAddOrUpdateDialog(false);
                        apiRouteInfoQuery(apiSearchData.value).then(res => {
                            useApiStore().resetRouterDataList(res.data);
                        })
                        saveLoading.value = false
                    }
                }).catch(res => {
                    saveLoading.value = false
                })
            } else {
                // 调用后端接口插入数据
                addApiRouteInfoQuery(apiForm.value).then(res => {
                    if (res["code"] === '200') {
                        ElNotification({
                            title: 'Success',
                            message: res["message"],
                            type: 'success'
                        })
                        useApiStore().resetAddOrUpdateDialog(false);
                        apiRouteInfoQuery(apiSearchData.value).then(res => {
                            useApiStore().resetRouterDataList(res.data);
                        })
                    }
                    saveLoading.value = false
                }).catch(res => {
                    saveLoading.value = false
                })
            }
        }
    })
}

function serviceChange() {
    apiForm.value.routeServiceName = apiForm.value.applicationName
}
</script>

<style scoped lang="less">
.formContainer {
    .selectIconsClass {
        width: 20px;
    }
}
</style>